<template>
  <el-card class="box-card" v-loading="loading">
    <div slot="header" class="clearfix">
      <span>代理资料</span>
    </div>
    <el-form :model="memberDetail" ref="memberDetail">
      <el-table border :data="[memberDetail]" class="el-table-align-center">
        <el-table-column width="120" label="姓名">
          <template slot-scope="{row}">
            {{row.reallyName}}
          </template>
        </el-table-column>
        <el-table-column prop="rebateName" width="100" label="代理返佣模式">
        </el-table-column>
        <el-table-column props="status" width="100" label="状态">
          <template slot-scope="{row}">
            <member-status-tag :status="row.status"/>
          </template>
        </el-table-column>
        <el-table-column props="parentName" label="上级代理">
          <template slot-scope="{row}">
            {{row.parentName}}
          </template>
        </el-table-column>
         <el-table-column props="parentName" label="玩家层级">
          <template slot-scope="{row}">
            {{row.levelName}}
          </template>
        </el-table-column>
        <el-table-column props="telephone" width="150" label="手机号码">
          <template slot-scope="{row}">
            <el-form-item prop="telephone" v-if="editAble" :required="false">
              <el-input v-model="row.telephone" auto-complete="off"></el-input>
            </el-form-item>
            <div v-else>{{row.telephone}}</div>
          </template>
        </el-table-column>
        <el-table-column props="addressMobile" width="150" label="手机号码归属地"></el-table-column>
        <el-table-column props="birthday" width="180" label="出生日期">
          <template slot-scope="{row}">
            {{row.birthday | toTime }}
          </template>
        </el-table-column>
        <el-table-column props="birthday" width="180" label="性别">
          <template slot-scope="{row}">
            {{row.sex |sex}}
          </template>
        </el-table-column>
        <el-table-column props="email" width="180" label="邮箱" :required="false">
          <template slot-scope="{row}">
            <el-form-item prop="email" v-if="editAble">
              <el-input v-model="row.email" auto-complete="off"></el-input>
            </el-form-item>
            <div v-else>
              {{ row.email}}
            </div>
          </template>
        </el-table-column>
        <!--<el-table-column props="address" width="200" label="地址">-->
        <!--<template slot-scope="{row}">-->
        <!--<el-form-item prop="address" v-if="editAble" :required="false">-->
        <!--<el-input v-model="row.address" auto-complete="off"></el-input>-->
        <!--</el-form-item>-->

        <!--<div v-else>{{row.address}}</div>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="registerDate" width="180" label="注册时间">
          <template>
            {{memberDetail.registerDate | toTime}}
          </template>
        </el-table-column>
        <el-table-column prop="registerIp" width="150" label="注册IP"></el-table-column>
        <el-table-column prop="registerDomain" width="150" label="注册地址"></el-table-column>
        <el-table-column prop="clientType" width="150" label="注册端">
          <template slot-scope="{row}">
          {{row.clientType | toConverter('DEVICE_TYPE')}}
        </template>
        </el-table-column>
       <el-table-column label="上次登录时间" align="center"   width="200">
        <template slot-scope="{row}">
          {{row.loginTime | toTime}}
        </template>
      </el-table-column>
      </el-table>
    </el-form>
  </el-card>
</template>

<script>
import { getMemberDetail } from '@/services/api/member';
import MemberStatusTag from '@/components/MemberStatusTag';
import { form } from '@/build';
// import ApplyDialog from '@/views/member/list/applyDialog';

export default {
  name: 'member-info-card',
  props: {
    'member-id': {
      type: Number,
    },
    // 切换成带输入可编辑状态
    'edit-able': {
      type: Boolean,
      default: false,
    },
  },
  mixins: [form],
  components: { MemberStatusTag },
  data() {
    return {
      memberDetail: {},
    };
  },
  mounted() {
    const phoneShowPartial = this.roleCheck('phone-show-partial');
    const phoneShowAll = this.roleCheck('phone-show-all');
    const emailShowPartial = this.roleCheck('email-show-partial');
    const emailShowAll = this.roleCheck('email-show-all');
    this.bindGet(getMemberDetail, 'memberDetail', {
      sendingData: { userId: this.$store.state.member.member_id },
      format: (data) => {
        data.telephone = _.formatUserPhoneEmail(data.telephone, phoneShowPartial, phoneShowAll);
        data.email = _.formatUserPhoneEmail(data.email, emailShowPartial, emailShowAll);
        return data;
      },
    });
    this.getAll();
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit(types.SHOW_APPLY_MODAL, { data: this.memberDetail, from: 'memberInfo' });

          // updateMemberInfo(this.memberDetail).then(([result,data])=>{
          //   if(result){
          //     this.$message({
          //       message: data.msg,
          //       type: 'success'
          //     })
          //   }
          // })
        } else {
          return false;
        }
      });
    },
  },

};
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
